<template>
	<div>
		<img :src="bg" class="wave" />
		<div class="login-container">
			<div class="img">
				<svg-icon icon-class="illustration" style="width: 500px; height: 380px"></svg-icon>
			</div>
			<div class="login-box">
				<div class="login-form">
					<svg-icon icon-class="logo" style="width: 250px; height: 80px"></svg-icon>
					<h2>RAN TEST</h2>
					<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
						<el-form-item prop="username">
							<el-input ref="usernameRef" v-model="ruleForm.username" placeholder="用户名" type="text" prefix-icon="el-icon-user-solid" />
						</el-form-item>
						<el-form-item prop="password">
							<el-input ref="passwordRef" v-model="ruleForm.password" placeholder="密码" :type="pwdType" prefix-icon="el-icon-lock" />
							<span class="show-pwd" @click="showPwd">
								<svg-icon :icon-class="pwdType === 'password' ? 'eye-off' : 'eye-on'" />
							</span>
						</el-form-item>
						<el-form-item>
							<el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px" @click.native.prevent="handleLogin">登录 </el-button>
						</el-form-item>
						<el-form-item>
							<el-divider content-position="center">
								<p style="color: #999; font-size: 0.75rem">第三方登录</p>
							</el-divider>
							<div class="thirdParty">
								<span v-for="(item, index) in thirdParty" :key="index" :title="`${item.title}登录`">
									<svg-icon :icon-class="`${item.icon}`" style="width: 20px; height: 20px; cursor: pointer"></svg-icon>
								</span>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { validUsername } from "@/utils/validate";
import bg from "@/assets/bg.png";

export default {
	name: "Login",
	data() {
		const validateUsername = (rule, value, callback) => {
			if (!validUsername(value)) {
				callback(new Error("用户名有误，提示：admin"));
			} else {
				callback();
			}
		};
		const validatePassword = (rule, value, callback) => {
			if (value !== "123456") {
				callback(new Error("密码有误，提示：123456"));
			} else {
				callback();
			}
		};
		return {
			ruleForm: {
				username: "admin",
				password: "123456"
			},
			rules: {
				username: [{ required: true, trigger: "blur", validator: validateUsername }],
				password: [{ required: true, trigger: "blur", validator: validatePassword }]
			},
			loading: false,
			pwdType: "password",
			redirect: undefined,
			bg: bg,
			thirdParty: [
				{
					title: "微信",
					icon: "wechat"
				},
				{
					title: "支付宝",
					icon: "alipay"
				},
				{
					title: "QQ",
					icon: "qq"
				},
				{
					title: "抖音",
					icon: "douyin"
				}
			]
		};
	},
	watch: {
		$route: {
			handler: function (route) {
				this.redirect = route.query && route.query.redirect;
			},
			immediate: true
		}
	},
	methods: {
		showPwd() {
			if (this.pwdType === "password") {
				this.pwdType = "";
			} else {
				this.pwdType = "password";
			}
			this.$nextTick(() => {
				this.$refs.passwordRef.focus();
			});
		},
		handleLogin() {
			this.$refs.ruleFormRef.validate(valid => {
				if (valid) {
					this.loading = true;
					this.$store
						.dispatch("user/login", this.ruleForm)
						.then(() => {
							this.$router.push({ path: this.redirect || "/" });
							this.loading = false;
						})
						.catch(() => {
							this.loading = false;
						});
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wave {
	position: fixed;
	height: 100%;
	left: 0;
	bottom: 0;
	z-index: -1;
}

.login-container {
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 18rem;
	padding: 0 2rem;

	.img {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.login-box {
		display: flex;
		align-items: center;
		text-align: center;

		.login-form {
			width: 450px;
			border-radius: 15px;
			background-clip: padding-box;
			padding: 35px 35px 15px 35px;
			box-shadow: 0 0 10px #c7cfc3;

			h2 {
				text-transform: uppercase;
				margin: 15px 0;
				color: #d5b580;
				font: bold 200% Consolas, Monaco, monospace;
			}

			.show-pwd {
				position: absolute;
				right: 10px;
				top: 4px;
				font-size: 16px;
				color: #889aa4;
				cursor: pointer;
				user-select: none;
			}

			.thirdParty {
				display: flex;
				justify-content: space-evenly;
				width: 100%;
			}
		}
	}
}

.el-button--primary {
	margin-bottom: 0px !important;
}
</style>
